<template>
	<div class="main">
		<el-card class="box-card">
			<template #header>
				<div class="card-header">
					<i data-v-3fc50d94="" class="el-icon"><svg data-v-3fc50d94="" xmlns="http://www.w3.org/2000/svg"
							viewBox="0 0 1024 1024">
							<path fill="currentColor" d="M32 128h960v64H32z"></path>
							<path fill="currentColor"
								d="M192 192v512h640V192zm-64-64h768v608a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32z">
							</path>
							<path fill="currentColor"
								d="M322.176 960H248.32l144.64-250.56 55.424 32zm453.888 0h-73.856L576 741.44l55.424-32z">
							</path>
						</svg></i>库区信息
				</div>
			</template>
			<el-form ref="formRef" :inline="true" :model="form"
				class="search-form bg-bg_color w-[99/100] pl-8 overflow-auto">
				<el-form-item label="库区名称:">
					<el-input v-model="form.name" class="!w-[180px]" clearable placeholder="请输入库区名称" />
				</el-form-item>
				<el-form-item label="库区编码:">
					<el-input v-model="form.code" class="!w-[180px]" clearable placeholder="请输入库区编码" />
				</el-form-item>
				<el-form-item label="状态:">
					<el-select
					    v-model="form.status"
					    class="!w-[180px]"
					    placeholder="请选择状态"
						clearable
					  >
					    <el-option
					      v-for="item in statusOptions"
					      :key="item.value"
					      :label="item.label"
					      :value="item.value"
					    />
					  </el-select>
				</el-form-item>
				<el-form-item>
				  <el-button
				    type="primary"
				    :icon="useRenderIcon('ri:search-line')"
				    :loading="loading"
				    @click="getInitData"
				  >
				    搜索
				  </el-button>
				  <el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)">
				    重置
				  </el-button>
				</el-form-item>
			</el-form>
			<div ref="contentRef" class="flex">
				<pure-table ref="tableRef" align-whole="center" showOverflowTooltip table-layout="auto"
					:loading="loading" size="large" adaptive :adaptiveConfig="{ offsetBottom: 108 }" :data="dataList"
					:columns="columns" :pagination="pagination" :paginationSmall="true" :header-cell-style="{
					background: 'var(--el-fill-color-light)',color: 'var(--el-text-color-primary)'}"  @row-click="rowClick"
					@page-size-change="handleSizeChange" @page-current-change="handleCurrentChange" style="height: 210px;">

					<template #status="{ row }">
						<el-tag size="large" :type="row.status===1?'primary':'danger'" effect="light">
							{{row.status===1?'启用':'停用'}}
						</el-tag>
					</template>
				</pure-table>
			</div>
		</el-card>
		<Location :warehouseAreaInfo="warehouseAreaInfo" v-if="warehouseAreaInfo"/>
	</div>
</template>

<script setup lang="ts">
	import { onBeforeMount, onMounted, ref, defineProps, reactive, watchEffect,toRaw } from "vue";
	import {
		getWarehouseAreaListApi,
	} from "@/api/warehouseApi";
	import type { PaginationProps } from "@pureadmin/table";
	import { PureTableBar } from "@/components/RePureTableBar";
	import { useRenderIcon } from "@/components/ReIcon/src/hooks";
	import Refresh from "@iconify-icons/ep/refresh";
	import { emitter } from "@/utils/mitt";
	import Location from "./location.vue";
	const props = defineProps({
		data: {
			type: Number,
			required: true,
			default: 0
		},
	});
	const warehouseId = ref(props.data)
	const warehouseAreaInfo = ref({})
	const formRef = ref();
	const dataList = ref([])
	const loading = ref(false)
	const form = reactive({
		page: 1,
		perPage: 10,
		name: null,
		code: null,
		status: null,
		warehouseId: props.data
	});
	const pagination = reactive<PaginationProps>({
		total: 0,
		pageSize: 10,
		currentPage: 1,
		background: true
	});
	const statusOptions = ref([
		{
			value: 1,
			label: '启用'
		},
		{
			value: 2,
			label: '禁用'
		}
	])
	watchEffect(() => {
		form.warehouseId = props.data
		getInitData()
	})

	function getInitData() {
		loading.value = true
		getWarehouseAreaListApi(toRaw(form)).then((res) => {
			setTimeout(() => {
			  loading.value = false;
			}, 150);
			if (res?.code === 200) {
				dataList.value = res.result.list;
				pagination.total = res.result.total;
				pagination.pageSize = res.result.per_page;
				pagination.currentPage = res.result.current_page;
				warehouseAreaInfo.value = res.result.list.length > 0?res.result.list[0] : {}
			}
			
		})
	}
	const getStatusType = (type, text = false) => {
		switch (type) {
			case 1:
				return text ? "启用" : "primary";
			case 2:
				return text ? "禁用" : "danger";
		}
	};
	const columns : TableColumnList = [
		{
			label: "库区名称",
			prop: "name"
		},
		{
			label: "库区编码",
			prop: "code"
		},
		{
			label: "所属仓库",
			prop: "warehouse.name"
		},
		{
			label: "状态",
			prop: "status",
			slot: "status",
		},
		{
			label: "创建者",
			prop: "createUser.name",
		},
		{
			label: "创建时间",
			prop: "createdAt"
		},
		{
			label: "更新者",
			prop: "updateUser.name"
		},
		{
			label: "更新时间",
			prop: "updatedAt"
		}
	];
	const handleSizeChange = (val: number) => {
	  loading.value = true;
	  form.page = 1;
	  form.perPage = val;
	  getWarehouseAreaListApi(toRaw(form)).then(res => {
	    dataList.value = res.result.list;
	    pagination.total = res.result.total;
	    pagination.pageSize = res.result.per_page;
	    pagination.currentPage = 1;
	  });
	
	  setTimeout(() => {
	    loading.value = false;
	  }, 150);
	}
	
	const handleCurrentChange = (val: number) => {
	  loading.value = true;
	  form.page = val;
	  getWarehouseAreaListApi(toRaw(form)).then((res: any) => {
	    dataList.value = res.result.list;
	    pagination.total = res.result.total;
	    pagination.pageSize = res.result.per_page;
	    pagination.currentPage = res.result.current_page;
	  });
	
	  setTimeout(() => {
	    loading.value = false;
	  }, 150);
	}
	const resetForm = (formEl: any) => {
		if (!formEl) return;
		form.name = null;
		form.code = null;
		form.status = null;
		formEl.resetFields();
		getInitData();
	};
	const rowClick = (row: any, column: any, event: any) => {
		warehouseAreaInfo.value = row
	}
</script>

<style scoped>
	.box-card {
		margin-bottom: 5px;
	}

	.card-header {
		display: flex;
		align-items: center;
	}

	.card-header i {
		margin-right: 5px;
	}
	:deep(.el-card__header) {
		padding: 14px 15px 7px !important;
		min-height: 40px;
	}
	:deep(.el-pagination) {
		margin-bottom: 0 !important;
	}
</style>